<template>
  <el-card
    class="comCard"
    :body-style="bodyStyle"
    :shadow="shadow"
    :style="{ width: width }"
  >
    <div slot="header" class="fix">
      <div class="left">
        <!-- 顶部左边 -->
        <slot name="header-left">
          <!-- 默认布局，当插槽有自定义Dom时被覆盖 -->
          <div class="default">
            <span class="title">{{ title }}</span>
            <span class="text">{{ text }}</span>
          </div>
        </slot>
      </div>
      <!-- 顶部右边 -->
      <div class="right">
        <slot name="header-right"></slot>
      </div>
    </div>
    <!-- 主体内容 -->
    <slot></slot>
  </el-card>
</template>

<script>
export default {
  name: "comCard",
  props: {
    width: {
      type: String,
      default: "auto",
    },
    title: {
      type: String,
      default: "",
    },
    text: {
      type: String,
      default: "",
    },
    bodyStyle: {
      type: Object,
      default: function () {
        return {
          padding: "0px",
        };
      },
    },
    shadow: {
      type: String,
      default: "naver",
    },
  },

  components: {},

  directives: {},

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.comCard {
  padding: 0 20px;
  ::v-deep .el-card__header {
    //样式穿透，修改原来的padding
    padding: 0px;
  }
  .fix {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    /* 默认布局div  */
    .left,
    .right {
      display: inline;
    }
    .left {
      .default {
        .title {
          font-size: 25px;
          font-weight: bold;
        }
        .text {
          color: rgb(129, 129, 129);
          font-size: 14px;
        }
      }
    }
    /* 默认布局div END */
  }
}
</style>